<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background: #9CBC2C;
            font-family: "微软雅黑";
        }

        ul,
        ol,
        input {
            list-style: none;
            border: none;
        }

        .main {
            width: 500px;
            margin: 50px auto;
        }

        .main .step {
            padding-left: 43px;
            color: #384313;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 0 1px 1px #c0d576;
            line-height: 40px;
        }

        .main ul li {
            width: 600px;
            height: 25px;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            background: rgba(255, 255, 255, .3);
            margin: auto;
            border: solid 2px #e3ebc3;
            border-color: rgba(255, 255, 255, .6);
            border-radius: 5px;
            margin-bottom: 4px;
        }

        .main ul li label {
            font-size: 13px;
            width: 110px;
            color: #111111;
            padding-left: 5px;
        }

        .main ul li input {
            border-radius: 3px;
            border: #FC3 solid 1px;
            width: 250px;
            height: 25px;
            outline: none;
            padding-left: 5px;
            margin-left: 35px;
        }

        .main .savebtn {
            display: block;
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #E3EBC3;
            font-weight: bold;
            cursor: pointer;
            margin: 10px auto;
            box-shadow: 1px 1px 1px 0px gray;
            background: linear-gradient(#50B9FD, #1158A8);
        }
    </style>
    <script>
        function checkUser(userLen){
            if(userLen <5 || userLen > 20){
                document.getElementById('msg').innerHTML='用户名长度非法！';
            }
            else{
                document.write('<p>用户名输入格式正确!</p>');
            }
        }
    function checkForm(){   
        var username = document.getElementById('username').value;
        var userLen = username.length;
       
        checkUser(userLen);
    }
    </script>
</head>

<body>
    
    <div class="main">
        <span class="step">Step1:用户详细资料</span>
        <ul>
            <li>
                <label>用户名称:</label>
                <input id="username" type="text" placeholder="请输入用户名" />
                <label id="msg"></label>
            </li>
            <li>
                <label>邮件地址:</label>
                <input name="email"  type="text" placeholder="example@qq.com" />
            </li>
            <li>
                <label>联系电话:</label>
                <input name="phone" type="text" placeholder="13539008452" />
            </li>
        </ul>
        
        <button class="savebtn" onclick="checkForm()">保存</span>
    </div>
</body>

</html>